﻿@page "/switchs"

<h3>Switch 开关</h3>

<h4>提供最普通的开关应用</h4>

<Block Title="基础用法" Introduction="点击按钮切换状态" CodeFile="switch.1.html">
    <p>点击第一个开关有值输出日志</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch ValueChanged="@OnValueChanged" Value="@BindValue1" OnColor="Color.Secondary" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用状态" Introduction="通过设置 <code>IsDisabled</code> 属性控制组件不可用状态" CodeFile="switch.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="开关颜色" Introduction="通过设置 <code>OnColor</code> <code>OffColor</code> 属性值，设置开关状态颜色" CodeFile="switch.3.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
